<template>
	<view>
		<view class="title">
			请输入验证码
		</view>
		<view class="remark">
			已发送6位验证码给{{phone}},请注意查收
		</view>
		<vcode-input class="vcode" ref="VcodeInput"
		 borderActiveColor="#137C92"
		 :sum="6" @vcodeInput="vcodeInput"></vcode-input>
	</view>
</template>

<script>
	import VcodeInput from '@/components/vcode-input/vcode-input'
	export default {
		components: {
			VcodeInput
		},
		data() {
			return {
				phone: ''
			}
		},
		onLoad(opt) {
			this.phone = opt.phone
			uni.showToast({
				title:"短信已发送"
			})
		},
		methods: {
			// 用户输入的值
			vcodeInput(val) {
				if(val ==='123456') {
					uni.switchTab({
						url: '../index/index'
					})
				}else{
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					})
				}
			},
			// 控制组件获取焦点
			setFocus() {
				this.$refs.VcodeInput.setFocus();
			},
			// 控制组件失去焦点
			setBlur() {
				this.$refs.VcodeInput.setBlur();
			},
			// 清除已输入
			clearValue() {
				this.$refs.VcodeInput.clearValue();
			}
		}
	}
</script>

	

<style lang="scss">
	.title{
		font-size: 50rpx;
		margin-left: 60rpx;
		margin-top: 40rpx;
		font-weight: 900;
	}
	.remark {
		font-size: 26rpx;
		margin-left: 60rpx;
		padding-top: 10rpx;
		color: #666666;
	}
	.vcode {
		padding-top: 60rpx;
	}
</style>
